<template>
    <div>
        <ul>
            <li v-for="v in mlist" :key="v.id" >
                <router-link :to="{name:'detail',params:{id:v.id}}">
                    <img :src="v.img" alt="">
                    <h2>{{v.nm}}</h2>
                    <h3>{{v.star}}</h3>
                    <h3>上映时间{{v.rt}}</h3>
                    <h3>评分{{v.sc}}</h3>
                </router-link>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                mlist: []
            }
        },
        mounted () {
            const url=`movieOnInfoList`;
            this.axios.get(url)
            .then((response)=>{
                this.mlist=response.data.movieList
            })
            .catch((error)=>{
                alert(error)
            })

        },
    }
</script>

<style lang="scss" scoped>
   ul{
       display: flex;
       flex-wrap: wrap;
      
   } li{
           width: 20%;
           margin: 10px;
          
   } img{
               width: 90%;
       }
</style>